Web Development Custom Animation Options এবং Callback Functions গাইড ও নোট

Chart.js আপনাকে কাস্টম অ্যানিমেশন তৈরি করার জন্য বিভিন্ন ধরনের animation options এবং callback functions প্রদান করে, যার মাধ্যমে আপনি চার্টের অ্যানিমেশন এবং ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন। এই ফিচারগুলো দিয়ে আপনি চার্টের অ্যানিমেশন ইফেক্ট, টাইমিং, এবং আচরণ সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন।

১. Custom Animation Options

Chart.js-এ অ্যানিমেশন কাস্টমাইজ করা খুবই সহজ। আপনি animation অপশন ব্যবহার করে চার্টের অ্যানিমেশন ইফেক্ট কাস্টমাইজ করতে পারেন। এটি বিভিন্ন সময়কাল, টাইমিং ফাংশন এবং আক্রমণ পদ্ধতির মাধ্যমে চার্টের অ্যানিমেশন প্রদর্শন করে।

অ্যানিমেশন কনফিগারেশন:

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow', 'Purple'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            duration: 2000, // অ্যানিমেশন চলার সময়কাল (মিলিসেকেন্ড)
            easing: 'easeInOutBounce', // অ্যানিমেশন ইফেক্ট টাইমিং (যেমন: easeInOutQuad, easeOutBounce)
            onProgress: function(animation) { // অ্যানিমেশন প্রগ্রেস কাস্টমাইজ করার জন্য callback function
                console.log('Animation Progress: ' + animation.currentStep / animation.numSteps);
            },
            onComplete: function() { // অ্যানিমেশন সম্পূর্ণ হলে callback function
                console.log('Animation Completed!');
            }
        }
    }
});

ব্যাখ্যা:

• duration: অ্যানিমেশন সম্পূর্ণ হওয়ার সময়কাল (মিলিসেকেন্ডে) নির্ধারণ করে।
• easing: অ্যানিমেশন টাইমিং ফাংশন, যা অ্যানিমেশনের গতি নির্ধারণ করে। উদাহরণস্বরূপ, easeInOutBounce একটি বাউন্সি টাইমিং ফাংশন।
• onProgress: অ্যানিমেশন চলাকালীন প্রতিটি স্টেপের অগ্রগতি দেখানোর জন্য callback function।
• onComplete: অ্যানিমেশন শেষ হলে কলব্যাক ফাংশন।

২. Callback Functions

Chart.js-এ callback functions ব্যবহার করে আপনি অ্যানিমেশন, টুলটিপ, লেজেন্ড, স্কেল ইত্যাদির আচরণ কাস্টমাইজ করতে পারেন। এগুলো অনেক কাস্টমাইজেশনের জন্য শক্তিশালী টুল।

২.১. Animation Callbacks

আপনি অ্যানিমেশন চলাকালীন onProgress এবং onComplete কলব্যাক ফাংশন ব্যবহার করতে পারেন।

options: {
    animation: {
        duration: 1500,
        easing: 'easeInOutQuad',
        onProgress: function(animation) {
            console.log('Progress: ' + (animation.currentStep / animation.numSteps) * 100 + '%');
        },
        onComplete: function() {
            console.log('Animation completed!');
        }
    }
}

২.২. Tooltip Callback

Tooltip-এর কাস্টম কনটেন্ট এবং আচরণ কাস্টমাইজ করতে আপনি callback functions ব্যবহার করতে পারেন। যেমন, tooltip এর কন্টেন্ট পরিবর্তন করা:

options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(tooltipItem) {
                    // Tooltip label কাস্টমাইজ করা
                    return 'Custom Label: ' + tooltipItem.raw + ' units';
                }
            }
        }
    }
}

২.৩. Legend Callback

Chart.js-এ Legend কাস্টমাইজেশনেও callback ব্যবহার করা যেতে পারে:

options: {
    plugins: {
        legend: {
            labels: {
                generateLabels: function(chart) {
                    // লেজেন্ড লেবেল কাস্টমাইজ করা
                    const labels = chart.data.labels;
                    return labels.map((label, index) => {
                        return {
                            text: 'Custom Legend: ' + label,
                            fillStyle: chart.data.datasets[0].backgroundColor[index],
                            index: index
                        };
                    });
                }
            }
        }
    }
}

৩. Custom Animation Effects

Chart.js-এ অ্যানিমেশন ইফেক্ট কাস্টমাইজ করার জন্য আপনি টাইমিং ফাংশন এবং custom easing ব্যবহার করতে পারেন।

টাইমিং এবং easing:

Chart.js কিছু predefined easing ফাংশন প্রদান করে, কিন্তু আপনি custom easing functions ব্যবহার করেও অ্যানিমেশন তৈরি করতে পারেন।

options: {
    animation: {
        duration: 2000,
        easing: function(t) {
            return t * t * t; // Cubic easing
        }
    }
}

এটি একটি কাস্টম কিউবিক easing ফাংশন যা অ্যানিমেশনকে ধীরে শুরু হতে এবং দ্রুত শেষ হতে সাহায্য করবে।

৪. Custom Animation Transitions

Chart.js-এ অ্যানিমেশন ট্রানজিশন কাস্টমাইজ করতে, আপনি animation.duration, animation.easing, এবং animation.onComplete ফাংশনগুলি সমন্বয় করতে পারেন, যাতে অ্যানিমেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করা যায়।

সারাংশ

Chart.js-এ Custom Animation Options এবং Callback Functions ব্যবহার করে আপনি আপনার চার্টের অ্যানিমেশন এবং ইন্টারঅ্যাকশনকে কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশন আপনাকে অ্যানিমেশনের সময়কাল, টাইমিং, এবং আচরণ নিয়ন্ত্রণ করতে সাহায্য করে। Callback Functions এর মাধ্যমে আপনি লেজেন্ড, টুলটিপ, স্কেল ইত্যাদির আচরণ কাস্টমাইজ করতে পারবেন, যা আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং পেশাদারী করে তোলে।